<template>
<div class="we-chat-public-channel views-container">
    <div class="wlm-table">
        <div class="warning">
            <div class="flex-row flex-justify-b flex-align-c">
                <div>
                    <p class="warning-title">微信公众号</p>
                    <p style="margin-top:10px;">绑定微信公众号，将平台与微信公众号打通</p>
                </div>
                <div>
                    <el-button style="margin-right:20px;" v-if="!isOpenEdit" size="small" plain class="orders-blue" @click="open">修改配置</el-button>
                    <el-switch v-model="formFormatData.formData.channel.wechat.switch" @change="switchChannel" active-value="1" inactive-value="0">
                    </el-switch>
                </div>
            </div>
        </div>
        <div class="flex-row flex-warp form-group">
            <div class="wlm-form" v-if="formFormatData.isOpendSetting">
                <section>
                    <div class="wlm-form-content channel-card">
                        <el-form :ref="formFormatData.key" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="230px" class="retail-form" label-position="right">
                            <el-form-item label="公众号名称" prop="username">
                                <span v-if="!isOpenEdit">{{formFormatData.formData.channel.wechat.name}}</span>
                                <el-input v-if="isOpenEdit" v-model="formFormatData.formData.channel.wechat.name"></el-input>
                            </el-form-item>
                            <el-form-item label="公众号类型" prop="nickname">
                                <span v-if="!isOpenEdit">{{type[formFormatData.formData.channel.wechat.type]}}</span>
                                <el-select v-if="isOpenEdit" v-model="formFormatData.formData.channel.wechat.type" placeholder="请选择">
                                    <el-option v-for="item in weChatPublicOptions" :key="item.value" :label="item.lable" :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="AppId" prop="password">
                                <span v-if="!isOpenEdit">{{formFormatData.formData.channel.wechat.AppId}}</span>
                                <el-input v-if="isOpenEdit" v-model="formFormatData.formData.channel.wechat.AppId"></el-input>
                            </el-form-item>
                            <el-form-item label="AppSecret" prop="repassword">
                                <span v-if="!isOpenEdit">{{formFormatData.formData.channel.wechat.AppSecret}}</span>
                                <el-input v-if="isOpenEdit" v-model="formFormatData.formData.channel.wechat.AppSecret"></el-input>
                            </el-form-item>
                            <el-form-item label="原始ID">
                                <span v-if="!isOpenEdit">{{formFormatData.formData.channel.wechat.original}}</span>
                                <el-input v-if="isOpenEdit" v-model="formFormatData.formData.channel.wechat.original"></el-input>
                            </el-form-item>
                            <el-form-item label="公众号头像" prop="repassword">
                                <img v-if="!isOpenEdit" class="wlm-upload-img" :src="formFormatData.formData.channel.wechat.logo && formFormatData.formData.channel.wechat.logo[0] ?formFormatData.formData.channel.wechat.logo[0]['file_path']:`${require('@/assets/custorm_style/default_picture.png')}`">
                                <choose-files v-if="isOpenEdit" ref="chooseFiles" :config="chooseLogoConfig" :changeEvt="formFormatFiltersChange"></choose-files>
                                <div class="form-help">建议尺寸：100*100</div>
                            </el-form-item>
                            <el-form-item label="二维码" prop="repassword" class="slider">
                                <img v-if="!isOpenEdit" class="wlm-upload-img" :src="formFormatData.formData.channel.wechat.qrcode &&  formFormatData.formData.channel.wechat.qrcode[0]? formFormatData.formData.channel.wechat.qrcode[0]['file_path']:`${require('@/assets/custorm_style/default_picture.png')}`">
                                <choose-files v-if="isOpenEdit" ref="chooseFiles" :config="chooseBgConfig" :changeEvt="formFormatFiltersChange"></choose-files>
                                <div class="form-help">建议尺寸：100*100</div>
                            </el-form-item>
                            <div class="wlm-form-header flex-row" style="margin-bottom:20px;">消息推送<p style="margin-left:8px;" class="form-help">公众号服务器配置</p>
                            </div>

                            <el-form-item label="URL(服务器地址)">
                                <span style="margin-left:0;" class="pointer" @click="handleClipboard(formFormatData.formData.channel.wechat.authorized.url.replace(/amp;/g,''),$event)">{{formFormatData.formData.channel.wechat.authorized.url.replace(/amp;/g,'')}}</span>
                                <p v-if="formFormatData.formData.channel.wechat.authorized.url" class="form-help">点击复制链接</p>
                                <!-- <span v-if="formFormatData.formData.channel.wechat.authorized" >{{formFormatData.formData.channel.wechat.authorized.url.replace(/amp;/g,'')}}</span> -->
                            </el-form-item>
                            <el-form-item label="Token(令牌)">
                                <span style="margin-left:0;" class="pointer" v-if="formFormatData.formData.channel.wechat.authorized&&!isOpenEdit" @click="handleClipboard(formFormatData.formData.channel.wechat.authorized.Token,$event)">{{formFormatData.formData.channel.wechat.authorized.Token}}</span>
                                <p v-if="formFormatData.formData.channel.wechat.authorized.Token&&!isOpenEdit" class="form-help">点击复制链接</p>
                                <div v-if="isOpenEdit" class="flex-row">
                                    <el-input maxlength="32" v-if="isOpenEdit" v-model="formFormatData.formData.channel.wechat.authorized.Token"></el-input>
                                    <el-button style="margin-left:10px;" type="text" @click="setRandom(32,'Token')">随机生成</el-button>
                                </div>
                            </el-form-item>
                            <el-form-item label="EncodingAESKey(消息加密密钥)">
                                <span style="margin-left:0;" class="pointer" v-if="formFormatData.formData.channel.wechat.authorized&&!isOpenEdit" @click="handleClipboard(formFormatData.formData.channel.wechat.authorized.EncodingAESKey,$event)">{{formFormatData.formData.channel.wechat.authorized.EncodingAESKey}}</span>
                                <p v-if="formFormatData.formData.channel.wechat.authorized.EncodingAESKey&&!isOpenEdit" class="form-help">点击复制链接</p>
                                <div v-if="isOpenEdit" class="flex-row">
                                    <el-input maxlength="43" v-if="isOpenEdit" v-model="formFormatData.formData.channel.wechat.authorized.EncodingAESKey"></el-input>
                                    <el-button style="margin-left:10px;" type="text" @click="setRandom(43,'EncodingAESKey')">随机生成</el-button>
                                </div>
                            </el-form-item>
                               <el-form-item label="消息提醒推送类型">
                                     <el-radio-group v-model="formFormatData.formData.channel.wechat.msg_type">
                                        <el-radio label="1">模板消息</el-radio>
                                        <el-radio label="2">订阅消息</el-radio>
                                    </el-radio-group>
                            </el-form-item>
                            <div class="wlm-form-header flex-row" style="margin-bottom:20px;">关注设置</div>

                            <el-form-item label="关注提示语">
                                <span style="margin-left:0;" v-if="formFormatData.formData.channel.wechat.tipwords&&!isOpenEdit">{{formFormatData.formData.channel.wechat.tipwords}}</span>
                                <el-input maxlength="32" v-if="isOpenEdit" v-model="formFormatData.formData.channel.wechat.tipwords"></el-input>
                            </el-form-item>
                            <el-form-item label="提示位置">
                                <el-checkbox-group v-model="formFormatData.formData.channel.wechat.tiplocation">
                                  <el-checkbox label="index">首页顶部</el-checkbox>
                                  <el-checkbox label="pay">支付成功页</el-checkbox>
                                  <el-checkbox label="my">个人中心顶部</el-checkbox>
                                  <el-checkbox label="orderdetail">订单详情页</el-checkbox>
                                  <el-checkbox label="free">免单</el-checkbox>
                                </el-checkbox-group>
                            </el-form-item>
                        </el-form>
                    </div>
                </section>
            </div>
            <div class="wlm-form" v-if="formFormatData.isOpendSetting">
                <section>
                    <div class="wlm-form-content channel-card">
                        <el-form :ref="formFormatData.key" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="140px" class="retail-form" label-position="right">
                            <el-form-item label="首页" v-if="formFormatData.formData.channel.wechat && formFormatData.formData.channel.wechat.url">
                                <el-button type="text" @click="handleClipboard(formFormatData.formData.channel.wechat.url,$event)">{{formFormatData.formData.channel.wechat.url}}</el-button>
                                <p class="form-help">点击复制链接</p>
                            </el-form-item>
                            <!-- <template v-if="formFormatData.formData.channel.wechat && formFormatData.formData.channel.wechat.authorizedAddress">
                                <el-form-item label="支付授权地址">
                                    <el-button style="margin-left:0;" v-for="(item, index) in formFormatData.formData.channel.wechat.authorizedAddress" :key="index" type="text" @click="handleClipboard(item,$event)">{{item}}</el-button>
                                    <p class="form-help">点击复制链接</p>
                                </el-form-item>
                            </template> -->
                            <el-form-item label="首页二维码" prop="repassword" class="slider" v-if="formFormatData.formData.channel.wechat.url_qrcode">
                                <img class="wlm-upload-img" :src="formFormatData.formData.channel.wechat.url_qrcode">
                            </el-form-item>
                        </el-form>
                    </div>
                </section>
            </div>
            <div class="wlm-form" v-if="!formFormatData.isOpendSetting">
                <section>
                    <div class="wlm-form-content channel-card">
                        <el-form v-if="formFormatData.isOpendSetting" :ref="formFormatData.key" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="140px" class="retail-form" label-position="right">
                            <div class="status-main pos-center">
                                <div class="flex-row flex-justify-c">
                                    <div class="flex-col">
                                        <router-link tag="span" to="/channel/weChatPublicChannelAdd">
                                            <el-button class="status-main-btn" type="success" style="background:rgb(104, 211, 135);border:none;"><i>
                                                    <svg-icon class="status-main-svg" icon-class="wechat" /></i>&nbsp; 立即接入</el-button>
                                        </router-link>
                                        <div class="flex-row flex-justify-e mar-top-4">
                                            <div>没有公众号，去<a target="_blank" href="https://mp.weixin.qq.com/" class="alink-blue">注册</a></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-form>
                    </div>
                </section>
            </div>
        </div>
    </div>
    <div v-if="isOpenEdit" v-cloak class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
        <el-button size="small" @click="saveForm" type="primary">保存</el-button>
        <el-button @click="isOpenEdit=false" size="small">取消</el-button>
    </div>
</div>
</template>

<script>
import {
  channelSave,
  channelGet
} from '@/api/channel'
import clipboard from '@/utils/clipboard'
import waves from '@/directive/waves' // Waves directive
import mixins from '@/mixins/mixins'
import ChooseFiles from '@/components/ChooseFiles/index'
export default {
  mixins: [mixins.getters('Form')],
  name: 'WeChatPublicChannel',
  components: {
    ChooseFiles
  },
  directives: {
    waves
  },
  filters: {

  },
  created() {

  },
  data() {
    return {
      isOpenEdit: false,
      type: {
        '1': '订阅号',
        '2': '认证订阅号',
        '3': '服务号',
        '4': '认证服务号/认证政府订阅号/认证媒体订阅号'
      },
      weChatPublicOptions: [
        {
          lable: '订阅号',
          value: '1'
        },
        {
          lable: '认证订阅号',
          value: '2'
        },
        {
          lable: '服务号',
          value: '3'
        },
        {
          lable: '认证服务号/认证政府订阅号/认证媒体订阅号',
          value: '4'
        }
      ],
      chooseLogoConfig: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          model: 'display'
        },
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'channel|wechat|logo',
          model: 'img'
          // validateField: 'merchantlog'
        }
      },
      chooseBgConfig: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          isMore: true,
          model: 'display'
        },
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'channel|wechat|qrcode',
          model: 'img'
          // validateField: 'businessbackgroundmap'
        }
      },
      formFormatData: {
        key: 'weChatPublicChannel',
        api: {
          editForm: {
            api: channelGet,
            params: {
              type: 'wechat',
              always: true
            },
            filters: {
              img: {
                bindInit: ['chooseLogoConfig', 'chooseBgConfig']
              }
            }
          },
          submitForm: channelSave
        },
        autofocusType: 1,
        isOpendSetting: false,
        formData: {
          type: 'wechat',
          channel: {
            wechat: {
              name: '',
              type: '',
              tipwords: '',
              tiplocation: [],
              AppId: '',
              authorized: { Token: '', EncodingAESKey: ''},
              AppSecret: '',
              msg_type:'1',
              logo: [],
              original: '',
              qrcode: [],
              switch: '0'
            }
          }
        },
        rules: {

        }
      }
    }
  },
  methods: {
    setRandom(len, name) {
      len = len || 32
      var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678' /** **默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
      var maxPos = $chars.length
      var pwd = ''
      for (let i = 0; i < len; i++) {
        pwd += $chars.charAt(Math.floor(Math.random() * maxPos))
      }
      this.formFormatData.formData.channel.wechat.authorized[`${name}`] = pwd
      console.log(pwd.length)
    },
    saveForm() {
      this.formFormatSubmit({ router: { type: 'replace', path: '', code: 1 } })
      this.isOpenEdit = false
    },
    handleClipboard(text, event) {
      clipboard(text, event)
    },
    formFormatCallBack(data, type, response) {
      if (type === 'editForm') {
        const { data: { data: listData = [] } } = response
        // console.log(Array.isArray(listData), '$listData')
        const isOpen = !Array.isArray(listData)
        //  || (Object.keys(listData)[0] === 'switch' && Object.keys(listData)['length'] === 0)
        this.formFormatData.isOpendSetting = true || isOpen
      }
    },
    open() {
      this.isOpenEdit = true
      // this.$alert('是否需要绑定其它微信公众号？', '通知', {
      //   showCancelButton: true,
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   callback: action => {
      //     if (action === 'confirm') {
      //       this.$router.push({
      //         path: '/channel/weChatPublicChannelAdd?'
      //       })
      //     }
      //   }
      // })
    },
    switchChannel() {
      if (this.formFormatData.isOpendSetting) {
        channelSave(this.formFormatData.formData).then((res) => {
          const { data: { code } } = res
          if (code === 1) {
            this.$message.success('保存成功！~')
          }
        })
      } else {
        this.$message.error('请先接入微信公众号再开启！~')
        this.formFormatData.formData.channel.wechat.switch = '0'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.we-chat-public-channel {
    .form-group {
        .wlm-form {
            width: 500px;
            flex-grow: 1;
            margin-right: 20px;
        }
    }

}
</style>
